import FlattenedSteps from "../../components/FlattenedSteps.astro";
import NavigationSteps from "../../components/NavigationSteps.astro";
import CloudPaidPlansOnly from "../include/_CloudPaidPlansOnly.mdx";

<CloudPaidPlansOnly />

You can customize the logo users see in the top left corner
of the Zulip app. For best results:

* The logo should be a wide rectangle image with an 8:1 width to height ratio.
  It will be displayed at 200×25 pixels, or more on high-resolution displays.
* Make sure your logo has a transparent background, and trim any bordering
  whitespace.

To upload a logo:

<FlattenedSteps>
  <NavigationSteps target="settings/organization-profile" />

  1. Under **Organization logo**, click the image under **Light theme logo** or
     **Dark theme logo**, and choose a replacement image to upload.
  1. Crop the image as desired, and click **Save changes**.
</FlattenedSteps>

Make sure to test the logo in both light theme and [dark theme](/help/dark-theme).
